<template>
  <view>
    <!-- 1. 头部搜索框 -->
    <ugo-search />
    <!-- 2. tabs 选项卡 -->
    <u-tabs :list="[{ name: '综合' }, { name: '销量' }, { name: '价格' }]" lineColor="#EB4450" :scrollable="false"></u-tabs>
    <!-- 3. 商品列表 -->
    <view class="goods-list">
      <!-- 商品列表渲染 -->
      <!-- <navigator class="goods-item" v-for="item in list" :key="item.cat_id"
        :url="`/pages/goods_detail/goods_detail?goods_id=` + item.goods_id">

        <image class="goods-image"
          :src="item.goods_small_logo || 'https://api-hmugo-web.itheima.net/full/2fb113b32f7a2b161f5ee4096c319afedc3fd5a1.jpg'"
          mode="scaleToFill" />
  
        <view class="goods-info">
          <view class="goods-name">{{ item.goods_name }}</view>
          <view class="goods-price">{{ item.goods_price }}</view>
        </view>
      </navigator>
       :url="`/pages/goods_detail/goods_detail?goods_id=` + item.goods_id"
       -->
      <view @tap="goDetail(item.goods_id)" class="goods-item" v-for="item in list" :key="item.cat_id">
        <image class="goods-image"
          :src="item.goods_small_logo || 'https://api-hmugo-web.itheima.net/full/2fb113b32f7a2b161f5ee4096c319afedc3fd5a1.jpg'"
          mode="scaleToFill" />
        <view class="goods-info">
          <view class="goods-name">{{ item.goods_name }}</view>
          <view class="goods-price">{{ item.goods_price }}</view>
        </view>
      </view>
      <view v-if="flag">我是有底线的~~~~~</view>
    </view>
  </view>
</template>

<script>
export default {
  data () {
    return {
      //
      flag: false,
      list: [],
      total: 0,
      paramsObj: {
        pagenum: 1,
        pagesize: 10
      }
    }
  },
  onLoad (options) {
    console.log(options, 88);
    this.paramsObj = {
      cid: options.cat_id,
      ...this.paramsObj
    }
    this.getList()
  },
  methods: {
    async getList () {
      const res = await uni.$u.http.request({
        url: '/goods/search',
        params: this.paramsObj
      })
      this.list = [...this.list, ...res.data.message.goods]
      this.total = res.data.message.total
    },
    goDetail (goods_id) {
      /* 
      navigateTo:类似navigator  跳转到非tabBar页面
      switchTab：跳转到tabBar页面
      */
      wx.navigateTo({
        url: '/pagesGoods/goods_detail/goods_detail?goods_id=' + goods_id
      })

      // wx.switchTab({
      //   url: '/pages/index/index'
      // })
    }
  },
  onReachBottom () {
    // 页面上拉触底
    console.log(123);
    /* 
    目的：实现上拉数据加载===分页
    + 上拉一次就pagenum+1
    + 需要重新获取数据，需要和之前的数据进行叠加
    */
    if (this.list.length >= this.total) {
      this.flag = true
      return false
    }
    this.paramsObj.pagenum += 1
    this.getList()
  },

  /* 下拉===更新 */
  onPullDownRefresh () {
    /* 
    pagenum=1
    list=[]
    重新获取数据
    */
    this.paramsObj.pagenum = 1
    this.list = []
    this.getList()
  }
}
</script>

<style lang="scss">
.goods-list {
  .goods-item {
    display: flex;
    border-bottom: 1rpx solid #ddd;
    padding: 25rpx;

    .goods-image {
      width: 190rpx;
      height: 190rpx;
    }

    .goods-info {
      flex: 1;
      font-size: 24rpx;
      // 垂直方向两端对齐
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 20rpx;

      .goods-name {
        // 多行超出隐藏
        overflow: hidden;
        -webkit-line-clamp: 2;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
      }

      .goods-price {
        color: #eb4450;

        // 前面的价格符号
        &::before {
          content: '￥';
          font-size: 80%;
          margin-right: 5rpx;
        }
      }
    }
  }
}
</style>
